<template>
  <view class="container-bg">
    <nut-navbar title="Todo List" class="bg-white shadow-sm border-b border-gray-100" />

    <!-- 输入区域 -->
    <view class="input-card overflow-hidden">
      <view class="p-8">
        <view class="text-lg font-semibold text-gray-800 mb-6">添加待办事项</view>
        <nut-input v-model="newTodo" placeholder="请输入待办事项..." class="mb-6 text-base" @confirm="addTodo" />
        <view class="flex-center py-4">
          <nut-button type="primary" class="w-full text-base font-medium rounded-lg" @click="addTodo">
            <view class="flex-center py-2">
              <text class="text-white">添加任务</text>
            </view>
          </nut-button>
        </view>
      </view>
    </view>

    <!-- 待办列表 -->
    <view class="mx-8 mt-8 mb-[300rpx]">
      <view class="text-lg font-semibold text-gray-800 mb-6 px-4"> 待办清单 ({{ todoStore.todos.length }}) </view>

      <view v-if="todoStore.todos.length > 0" class="space-y-4">
        <view v-for="todo in todoStore.todos" :key="todo.id" class="card-hover overflow-hidden" @click="toggleTodo(todo.id)">
          <view class="flex-between p-6">
            <view class="flex-1 mr-6">
              <view class="text-base font-medium transition-all duration-200" :class="todo.completed ? 'todo-completed' : 'text-gray-800'">
                {{ todo.text }}
              </view>
              <view class="text-sm mt-2" :class="todo.completed ? 'status-completed' : 'status-pending'">
                {{ todo.completed ? "✓ 已完成" : "○ 待完成" }}
              </view>
            </view>

            <nut-button type="danger" size="small" class="px-4 py-2 text-sm font-medium rounded-lg" @click.stop="removeTodo(todo.id)"> 删除 </nut-button>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="card py-8">
        <view class="text-center">
          <view class="text-6xl mb-6">📝</view>
          <view class="text-lg font-medium text-light mb-4">暂无待办事项</view>
          <view class="text-sm text-gray-300">添加一个任务开始吧！</view>
        </view>
      </view>
    </view>

    <!-- 底部统计栏 -->
    <view class="stats-bar">
      <view class="flex gap-4 py-4">
        <view class="flex-1 flex-center flex-col">
          <view class="text-xl font-bold text-primary">{{ todoStore.todos.length }}</view>
          <view class="text-xs text-muted mt-1">总计</view>
        </view>
        <view class="flex-1 flex-center flex-col">
          <view class="text-xl font-bold text-success">{{ todoStore.completedCount }}</view>
          <view class="text-xs text-muted mt-1">已完成</view>
        </view>
        <view class="flex-1 flex-center flex-col">
          <view class="text-xl font-bold text-warning">{{ todoStore.pendingCount }}</view>
          <view class="text-xs text-muted mt-1">待完成</view>
        </view>
      </view>

      <view v-if="todoStore.completedCount > 0" class="py-4 flex-center">
        <nut-button type="info" size="small" class="px-4 py-2 text-sm font-medium rounded-lg" @click="clearCompleted"> 清空已完成 </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useTodoStore } from "@/store/todo";

/**
 * Todo List 首页组件
 * 使用 NutUI 组件库和 Pinia 状态管理
 * 采用 UnoCSS 原子类进行样式开发
 */

definePageConfig({
  navigationBarTitleText: "Todo List",
});

const todoStore = useTodoStore();
const newTodo = ref("");

/**
 * 添加新的待办事项
 */
const addTodo = () => {
  if (newTodo.value.trim()) {
    todoStore.addTodo(newTodo.value.trim());
    newTodo.value = "";
  }
};

/**
 * 切换待办事项完成状态
 */
const toggleTodo = (id: number) => {
  todoStore.toggleTodo(id);
};

/**
 * 删除待办事项
 */
const removeTodo = (id: number) => {
  todoStore.removeTodo(id);
};

/**
 * 清空已完成的待办事项
 */
const clearCompleted = () => {
  todoStore.clearCompleted();
};
</script>

<style lang="scss" scoped>
.nut-input {
  padding: 0 !important;
}
</style>
